<template>
	<!-- <div id="toolbar">
		<div class="button" @click="on_flyto">飞行到</div>
		<div class="button" @click="on_setview">视图切换到</div>
		<div class="button" @click="on_set_orientation">设置方位</div>
	</div> -->
	<div id="chat">
		<div>
			<div>
				<textarea class="input" id="input"></textarea>
			</div>
			<div class="button" @click="on_run">执行命令</div>
		</div>
	</div>
	<div class="viewer-container" id="viewerContainer"></div>
</template>

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted } from "vue";

import Earth from "../earth/Earth";
import Executor from "../command/Executor";
import DeepseekNLP from "../nlp/DeepseekNLP";
import type { CesiumCommand } from "../command/Command";

let earth: Earth;
let executor: Executor;

onMounted(() => {
	Cesium.Ion.defaultAccessToken =
		"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZGExMWQwMy0xODQ5LTQxZGMtOTgzNi1iMDgxOTcxMmU5MGUiLCJpZCI6MzE4OTUsImlhdCI6MTcwNDc3MjI4MH0.paegfhDFv-ieH_LgCdbzBuNr2ApT_-cQ6gILMO7eZ6M";

	/**
	 * 初始化地球
	 */
	earth = new Earth("viewerContainer");

	/**
	 * 初始化指令执行器
	 */
	executor = new Executor({
		earth: earth,
	});
});

const on_flyto = async () => {
	let text = "飞行到上海，高度为10000米, 俯仰角-30度";
	let nlp = new DeepseekNLP();
	let command: CesiumCommand = await nlp.parseNLCommand(text);
	if (command) {
		// alert(command.action);
		// console.log(command.action);
		executor.run(command);
	} else {
		alert("命令解析失败");
	}
};

/**
 * 切换视图
 */
const on_setview = async () => {
	let text = "视图切换到北京，高度为10000米, 俯仰角-90度";
	let nlp = new DeepseekNLP();
	let command: CesiumCommand = await nlp.parseNLCommand(text);
	if (command) {
		// alert(command.action);
		// console.log(command.action);
		executor.run(command);
	} else {
		alert("命令解析失败");
	}
};

/**
 * 设置方位
 */
const on_set_orientation = async () => {
	let text = "俯视角设置为-45度";
	let nlp = new DeepseekNLP();
	let command: CesiumCommand = await nlp.parseNLCommand(text);
	if (command) {
		// alert(command.action);
		// console.log(command.action);
		executor.run(command);
	} else {
		alert("命令解析失败");
	}
};

/**
 * 执行指令
 */
const on_run = async () => {
	let text = document.getElementById("input")?.value.trim();
	if (text.length == 0) {
		alert("指令为空");
	} else {
		let nlp = new DeepseekNLP();
		let command: CesiumCommand = await nlp.parseNLCommand(text);
		if (command) {
			// alert(command.action);
			// console.log(command.action);
			executor.run(command);
			console.log(`命令[${command.action}]执行完毕`);
		} else {
			alert("命令解析失败");
		}
	}
};
</script>

<style scoped>
.viewer-container {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #ccc;
}

#toolbar {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 5px;
	background-color: #ffffff78;
	z-index: 100;
}
.button {
	float: left;
	height: 30px;
	width: 80px;
	line-height: 30px;
	background-color: black;
	margin: 0px 10px;
	color: white;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}

.button :hover {
	color: yellow;
}

#chat {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 10px;
	/* width: 200px; */
	/* height: 100px; */
	background-color: #eeecec78;
	z-index: 100;
}
#input {
	width: 400px;
	height: 100px;
}
</style>
